<template>
  <div class="app-container">

    <u-page title="开票设置">
      <div slot="header">
        <el-button type="primary" @click="updateData">保存</el-button>
      </div>

      <el-form ref="dialogForm" :model="dataForm" :rules="rules" label-width="120px">
        <el-tabs v-model="active">
          <el-tab-pane label="基础设置" name="first">

            <el-card shadow="never" class="panel">
              <div class="panel-body">
                <div class="panel-header">
                  <h4>启用开票</h4>
                  <span>开启后在平台中开具发票</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.enabled" class="panel-switch" />
                </div>
              </div>

              <div v-if="dataForm.enabled" style="margin-top: 20px;">

                <el-form-item label="数电发票" prop="digitalInvoice">
                  <el-radio-group v-model="dataForm.digitalInvoice">
                    <el-radio :label="true">启用</el-radio>
                    <el-radio :label="false">禁用</el-radio>

                    <el-tooltip class="item" effect="dark" content="确认顾客不要该账号！作废会注销该账号" placement="top">
                      <i class="el-icon-question" />
                    </el-tooltip>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="销方名称" prop="sellerTitle">
                  <el-input v-model="dataForm.sellerTitle" placeholder="销方公司名称" maxlength="100" show-word-limit clearable />
                </el-form-item>

                <el-form-item label="销方税号" prop="sellerTaxNo">
                  <el-input v-model="dataForm.sellerTaxNo" placeholder="销方税号" maxlength="100" show-word-limit clearable />
                </el-form-item>

                <el-form-item label="销方电话" prop="sellerMobile">
                  <el-input v-model="dataForm.sellerMobile" placeholder="销方电话" maxlength="100" show-word-limit clearable />
                </el-form-item>

                <el-form-item label="销方地址" prop="sellerAddr">
                  <el-input v-model="dataForm.sellerAddr" placeholder="销方注册地址" maxlength="100" show-word-limit clearable />
                </el-form-item>

                <el-form-item label="银行名称" prop="sellerBankName">
                  <el-input v-model="dataForm.sellerBankName" placeholder="销方开户银行名称" maxlength="100" show-word-limit clearable />
                </el-form-item>

                <el-form-item label="银行账号" prop="sellerBankNo">
                  <el-input v-model="dataForm.sellerBankNo" placeholder="销方开户银行账号" maxlength="100" show-word-limit clearable />
                </el-form-item>

                <el-form-item label="不动产权证号" prop="propertyNo">
                  <el-input v-model="dataForm.propertyNo" placeholder="不动产权证号" maxlength="100" show-word-limit clearable />
                </el-form-item>

                <el-form-item label="不动产地址" prop="propertyAddr">
                  <el-input v-model="dataForm.propertyAddr" placeholder="不动产地址" maxlength="100" show-word-limit clearable />
                </el-form-item>

                <el-form-item label="不动产名单" prop="propertyList">
                  <el-input v-model="dataForm.propertyList" type="textarea" placeholder="不动产名单" clearable rows="2" />
                  <u-tip-info title="格式: 名单+换行或者英文逗号" />
                </el-form-item>

              </div>
            </el-card>

          </el-tab-pane>

          <el-tab-pane label="小程序开票" name="second">
            <el-card shadow="never" class="panel">
              <div class="panel-body">
                <div class="panel-header">
                  <h4>启用小程序开票</h4>
                  <span>开启后在小程序平台中开具发票</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.wxEnabled" class="panel-switch" />
                </div>
              </div>

              <div style="margin-top: 20px;">
                <el-form-item label="小程序规则说明" prop="wxpolicy">
                  <u-tinymce v-model="dataForm.wxpolicy" :height="300" />
                </el-form-item>
              </div>

            </el-card>

          </el-tab-pane>

          <el-tab-pane label="规则说明" name="sixth">

            <el-form-item label="规则说明" prop="policy">
              <u-tinymce v-model="dataForm.policy" :height="300" />
            </el-form-item>

          </el-tab-pane>

          <el-tab-pane label="储值卡" name="thirds">

            <el-form-item label="储值卡" prop="storedValueCardList">
              <el-input v-model="dataForm.storedValueCardList" type="textarea" placeholder="储值卡名单" clearable rows="2" />
              <u-tip-info title="格式: 名单+换行或者英文逗号" />
            </el-form-item>

          </el-tab-pane>

          <el-tab-pane label="黑名单" name="third">

            <div style="margin-bottom: 20px">
              <el-alert title="温馨提示" type="success" show-icon :closable="false">
                <span style="font-weight: bold; font-size: 12px;">
                  自营黑名单：支持合同号和商品编码，并可进行个别设置。
                </span>
              </el-alert>
            </div>

            <el-form-item label="自营名单" prop="selfList">
              <el-input v-model="dataForm.selfList" type="textarea" placeholder="合同号黑名单" clearable rows="5" />
              <u-tip-info title="格式: 合同号+换行或者英文逗号" />
            </el-form-item>

            <el-form-item label="自营名单" prop="selfGoodsList">
              <el-input v-model="dataForm.selfGoodsList" type="textarea" placeholder="商品编码黑名单" clearable rows="5" />
              <u-tip-info title="格式: 商品编码+换行或者英文逗号" />
            </el-form-item>

          </el-tab-pane>

          <el-tab-pane label="白名单" name="fourth">

            <div style="margin-bottom: 20px">
              <el-alert title="温馨提示" type="success" show-icon :closable="false">
                <span style="font-weight: bold; font-size: 12px;">
                  租赁白名单：支持合同号和商品编码，必须设置合同号及其对应的商品编码。
                </span>
              </el-alert>
            </div>

            <el-form-item label="租赁名单" prop="leaseList">
              <el-input v-model="dataForm.leaseList" type="textarea" placeholder="合同号白名单" clearable rows="5" />
              <u-tip-info title="格式: 合同号+换行或者英文逗号" />
            </el-form-item>

            <el-form-item label="租赁名单" prop="leaseGoodsList">
              <el-input v-model="dataForm.leaseGoodsList" type="textarea" placeholder="商品编码白名单" clearable rows="5" />
              <u-tip-info title="格式: 商品编码+换行或者英文逗号" />
            </el-form-item>

          </el-tab-pane>

        </el-tabs>
      </el-form>
    </u-page>

  </div>
</template>
<script>

export default {
  data() {
    return {
      api: this.$u.api.PluginsInvoicingConfig,
      active: 'first',
      dataForm: {},
      rules: {
      }
    }
  },
  created() {
    this.getLoad()
  },
  methods: {
    // 初始化数据
    getLoad() {
      this.api.fetch().then(res => {
        this.dataForm = res.data
      })
    },
    // 提交编辑数据
    updateData() {
      const self = this
      this.$confirm('确认更改开票设置', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.$refs['dialogForm'].validate((valid) => {
          if (valid) {
            self.api.update(self.dataForm).then(() => {
              self.getLoad()
              self.$u.msg('保存成功')
            })
          }
        })
      }).catch(() => {
      })
    }
  }

}
</script>

<style lang="scss" scoped>

.panel{
  margin-bottom: 20px;
  .panel-body{
    display:flex;
    justify-content:space-between;

    .panel-header{
      display: flex;
      flex-flow: column;
      color: #999;
      font-size: 12px;

      h4{
        font-size: 14px;
        color: #000;
      }
    }

    .panel-switch{
      margin-top: 20px;
    }
  }
}

</style>
